<template>
  <div class="info">
    <el-card class="info-box">
      <div slot="header" class="clearfix">
        <span>个人信息</span>
      </div>
      <el-form label-width="100px" :model="user" ref="user" :rules="rules">
        <el-form-item class="id-box" label="账号：">
          <span class="id-input">{{ this.user.id }}</span>
        </el-form-item>
        <el-form-item class="name-box" label="用户名：" prop="name">
          <span class="name-input" v-show="show1">{{ this.user.name }}</span>
          <el-input class="name-input" v-show="show2" v-model="user.name" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item class="tel-box" label="手机号：" prop="tel">
          <span class="tel-input" v-show="show1">{{ this.user.tel }}</span>
          <el-input class="tel-input" v-show="show2" v-model="user.tel" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item class="pwd-box" label="密码：" prop="pwd">
          <span class="pwd-input" v-show="show1">{{ this.user.pwd }}</span>
          <el-input class="pwd-input" v-show="show2" v-model="user.pwd" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item class="type-box" label="类型：">
          <span class="type-input">{{ this.user.type }}</span>
        </el-form-item>
        <el-form-item class="bu-box">
          <el-button class="button" v-show="show1" type="primary" v-on:click="updateon()">修改信息</el-button>
          <el-button class="button" v-show="show2" type="primary" v-on:click="update()">修改</el-button>
          <el-button class="button" v-show="show2" type="primary" v-on:click="cancel()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";

export default {
  data: function () {
    let ctel = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空！'));
      } else if (!Number.isInteger(value / 1)) {
        callback(new Error('请输入正确的手机号格式！'));
      } else if (value < 10000000000) {
        callback(new Error('手机号不足11位！'));
      }
      callback();
    };
    return {
      user: {},
      user2: {},
      show1: true,
      show2: false,
      rules: {
        name: [
          {required: true, message: '用户名不能为空！', trigger: 'blur'},
        ],
        tel: [
          {validator: ctel, trigger: 'blur'},
        ],
        pwd: [
          {required: true, message: '密码不能为空！', trigger: 'blur'},
        ]
      }
    }
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      if (!sessionStorage.getItem("user")) {
        this.$message({
          showClose: true,
          type: 'error',
          message: '您还未登录，请登录查看个人信息！'
        });
        this.$router.push("/login")//页面跳转
      } else {
        this.user = JSON.parse(sessionStorage.getItem("user"))
        this.user2 = JSON.parse(sessionStorage.getItem("user"))
        if (this.user.type === 0) {
          this.user.type = '普通用户'
        } else if (this.user.type === 1) {
          this.user.type = '管理员'
        } else {
          this.user.type = '高级管理员'
        }
      }

    },
    logout() {
      sessionStorage.clear();
      this.$message({
        showClose: true,
        type: "success",
        message: "退出登录成功！",
      })
      setTimeout(() => {
        location.reload()
      }, 1000);
    },
    updateon() {
      // 调整为修改状态
      this.show1 = false
      // 查看状态关闭
      this.show2 = true
      // 修改状态开启
    },
    cancel() {
      // 调整为查看状态
      this.show2 = false
      // 修改状态关闭
      this.show1 = true
      // 查看状态开启
      this.$refs['user'].resetFields();
      // 重设输入框状态
      this.user.name = this.user2.name
      this.user.tel = this.user2.tel
      this.user.pwd = this.user2.pwd
      // 恢复修改信息
    },
    update() {
      this.$refs['user'].validate((valid) => {
        if (valid) {
          axios.put("api/user", qs.stringify({
            id: this.user2.id,
            name: this.user.name,
            tel: this.user.tel,
            pwd: this.user.pwd,
            type: this.user2.type,
            pwd2: this.user2.pwd
          })).then((res) => {
            if (res.data.code === '0') {
              this.$message({
                showClose: true,
                type: "success",
                message: "修改成功！请重新登陆！",
              })
              sessionStorage.clear();
              setTimeout(() => {
                location.reload()
              }, 1000);
            } else {
              this.$message({
                showClose: true,
                type: "error",
                message: res.data.msg,
              })
            }
            return true;
          })
        }
      })
    },
  }
}
</script>

<style scoped>
.info {
  width: 100%;
  min-height: 666px;
}

.info-box {
  height: 500px;
  width: 500px;
  position: relative;
  left: 50%;
  transform: translate(-50%, 10%);
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
  border-radius: 25px;
  justify-content: space-around;
}

/deep/ .el-card {
  border: 0 !important;
}

/deep/ .el-card__header {
  height: 50px;
  font-size: 17px;
  padding: 15px 20px;
  background-color: #354e66;
  font-weight: bold;
  color: #f9bf4b;
}

/deep/ .bu-box .el-form-item__content {
  margin-left: 0 !important;
}

.id-box {
  padding-top: 10px;
}

.id-box, .name-box, .tel-box, .pwd-box, .type-box {
  padding: 12px;
  width: 300px;
  margin: auto;
  justify-content: center;
  text-align: left;
}

.el-form span {
  padding-left: 16px;
}

/deep/ .el-form-item__label:before {
  content: '' !important;
}

.bu-box {
  padding: 20px;
}

.button {
  width: 120px;
  height: 40px;
  margin: 0px 20px;
  color: #f9bf4b;
  font-size: 17px;
  font-weight: bold;
  background: #354e66;
}
</style>